<template>
<!-- 搜索  -->
  <div class="home">
   <div class="box">
      <van-search
          class="sousuo"
          color="#eae9e5"
          v-model="value"
          shape="round"
          background="white"
          placeholder="请输入搜索关键词"
          @click="jumpToSearch()"
      />
      <div
        class="login"
        @click="jumpToLogin()"
        >
             登录
      </div>
   </div>
<main>
<!-- 轮播 -->
<van-swipe :autoplay="3000" :height="150">
  <van-swipe-item >
    <img src="../../assets/1.png" :style="{width:'100%',height:'100%'}" />
  </van-swipe-item>
   <van-swipe-item >
    <img src="../../assets/2.png" :style="{width:'100%',height:'100%'}" />
  </van-swipe-item>
   <van-swipe-item >
    <img src="../../assets/3.png" :style="{width:'100%',height:'100%'}" />
  </van-swipe-item>
   <van-swipe-item >
    <img src="../../assets/4.png" :style="{width:'100%',height:'100%'}" />
  </van-swipe-item>
</van-swipe>

<!-- 商品导航 -->
<ul>
  <li
  class="li1"
  @click="jumpToDiscount()"
  >限时折扣</li>
  <li
  class="li2"
  @click="jumpToDiscount()"
  >本周爆款</li>
  <li
  class="li3"
  @click="jumpToCategory()"
  >分类</li>
  <!-- <router-link
  :class="link"
  :to="/discount"
  @click="jumpToDiscount()"
  >
  限时折扣
  </router-link> -->
  <!-- <router-link :to="/discount">本周爆款
  </router-link>
   <router-link :to="/discount">分类
  </router-link> -->
</ul>

  <!-- 第一个：限时折扣 -->
<div class="count">
<div class="limit-time">
  <div class="count-down">
    <h3>限时折扣</h3>
    <van-count-down :time="time">
      <template #default="timeData">
        <span class="block">{{ timeData.hours }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.minutes }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.seconds }}</span>
      </template>
    </van-count-down>
  </div>
  <p
    @click="jumpToMore()"
    class="ppp"
  >更多</p>
</div>
<div>
<van-card
  v-for="item in hot"
  :key="item.id"
  :price="item.price | money"
  :origin-price="item.originPrice | money"
  :title="item.title"
  :thumb="item.image"
  @click="jumpToDetail(item.id)"
/>
</div>
</div>

<!-- 第二个：本周爆款 -->
<div class="hots">
<div class="hot">
    <h3>本周爆款</h3>
    <p
      @click="jumpToMore()"
      class="ppp"
    >更多</p>
</div>
<van-card
   v-for="item in count"
  :key="item.id"
  :price="item.price | money"
  :origin-price="item.originPrice | money"
  :title="item.title"
  :thumb="item.image"
  @click="jumpToDetail(item.id)"
/>
</div>

<!-- 第三个：为你推荐 -->
<div class="forYou">
  <h3>为你推荐</h3>
  <van-list
    v-model="loading"
    :finished="isEnd"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-card
      v-for="item in products"
      :key="item.id"
      :price="item.price | money"
      :thumb="item.image"
      @click="jumpToDetail(item.id)"
    >
  <!-- 自定义标题插槽，显示一行标题文本 -->
  <template #title>
    <div class="van-ellipsis">{{ item.title }}</div>
  </template>
  <!-- 自定义插槽，显示优惠 -->
  <template #tags>
    <van-tag plain type="danger">满300减30</van-tag>&nbsp;
    <van-tag plain type="danger">店铺领券</van-tag>&nbsp;&nbsp;&nbsp;
    <van-icon
            name="cart-circle-o"
            color="#f00"
            size="17"
            @click.stop="handleAddToCart(item)"
          />
  </template>
</van-card>
</van-list>
</div>
</main>

<!-- 回到顶部 -->
<back-top
:visible="visible"
 @click="handleBackTop"
 ></back-top>
  </div>
</template>

<script>
import { getHots } from '@/api/home'
export default {
  name: 'Home',
  data() {
    return {
      banners: [
        '../../assets/1.png',
        '../../assets/2.png',
        '../../assets/3.png',
        '../../assets/4.png',
      ], // 轮播图数组
      products: [], // 推荐商品
      isEnd: false, // 是否所有推荐商品已查完
      nextIndex: 0, // 下一页推荐商品查询起始索引
      loading: true, // 商品列表是否正在加载列表数据
      visible: false, // 回到顶部显示/隐藏
      hot: [], // 本周爆款
      count: [], // 限时折扣
      value: '', // 搜索框的
      time: '', // 限时折扣的倒计时
    }
  },
  async created() { // 实例创建后，立即发送网络请求
    try {
      const [
        // { list: banners },
        { list: products, isEnd, nextIndex },
      ] = await Promise.all([
        // getBanners(),
        getHots(),
      ])
      // 修改 data 数据，以响应式渲染
      // this.banners = banners
      this.products = products
      this.count = products.splice(10, 1)
      this.hot = products.splice(5, 1)
      this.nextIndex = nextIndex
      this.isEnd = isEnd
      this.loading = false
    } catch (error) {
      console.error('有错误：', error)
    }
  },
  mounted() {
    document.querySelector('main').onscroll = e => {
      this.visible = e.target.scrollTop >= 500
    }
  },
  beforeDestroy() {
    // 组件销毁时，应该移除在DOM节点上绑定的事件
    document.querySelector('main').onscroll = null
  },
  methods: {
    // 触底加载更多商品
    async onLoad() {
      // 异步更新数据
      const { list, nextIndex, isEnd } = await getHots(this.nextIndex)
      this.products = [
        ...this.products, // 浅拷贝，将原有 products 数组中的元素复制到新数组中
        ...list,
      ]
      this.nextIndex = nextIndex
      this.isEnd = isEnd
      this.loading = false
    },
    // 跳转到详情页面
    jumpToDetail(id) {
      this.$router.push('/detail/' + id)
    },
    // 跳转到限时折扣页面
    jumpToDiscount() {
      this.$router.push('/discount/')
    },
    // 跳转到分类页面
    jumpToCategory() {
      this.$router.push('/category/')
    },
    // 跳转到登录页面
    jumpToLogin() {
      this.$router.push('/login/')
    },
    // 跳转到限时折扣页面
    jumpToMore() {
      this.$router.push('/discount/')
    },
    // 跳转到搜索页面
    jumpToSearch() {
      this.$router.push('/search/')
    },
    /**
     * 处理添加到购物车
     */
    handleAddToCart(prod) {
      // 构建当前选购的商品对象
      const currentProduct = {
        id: prod.id,
        image: prod.image,
        title: prod.title,
        price: prod.price,
      }
      // 加入购物车，更新 vuex store 中的状态数据
      // 选购中不能直接调用到 store 中定义的 action 方法
      // 而是需要调用 store.dispatch(action) 来分发 action
      this.$store.dispatch('cart/addToCartAsync', currentProduct)
      // 提示
      this.$toast({
        type: 'success',
        message: '加入成功',
      })
    },
    handleBackTop() {
      document.querySelector('main').scrollTop = 0
    },
  },
}
</script>

<style lang="less" scoped>
ul{
  width: 100%;
  height: 50px;
  margin: 25px 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  .li1,.li2,.li3{
    font-size: 15px;
    font-weight: 999;
    color: #71a284;

  }
}
main{
  width: 100%;
  min-height: 300px;
  background: #c1ab96;

   .colon {
    display: inline-block;
    margin: 0 4px;
    color:black;
  }
  .block {
    display: inline-block;
    width: 50px;
    color: #fff;
    font-size: 12px;
    margin-left: 15px;
    text-align: center;
    background-color:black;
  }
 .count{
   width: 80%;
   min-height: 100px;
   margin: 0 auto;
  .limit-time{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .count-down{
      display: flex;
      align-items: center;
      justify-content: space-between;
      h3{
        color: white;
        font-size: 18px;
      }
  }

  }
  // .card{
  //   border-radius: 5px;
  // }
 }
  .hots{
    width: 80%;
    min-height: 100px;
    margin: 0 auto;
    .hot{
        display: flex;
        align-items: center;
        justify-content: space-between;
        h3{
          color: white;
          font-size: 18px;
        }
        a{
            font-size: 12px;
            color: white;
          }
    }
  }
  .forYou{
    width: 80%;
    min-height: 100px;
    margin: 0 auto;
     h3{
          color: white;
          font-size: 18px;
        }
      .van-ellipsis{
        margin-bottom: 15px;
      }
  }
 .box{
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 95%;
   .login{
     border:1px solid #c1ab96;
     border-radius: 15px;
     width: 100px;
     color: #c1ab96;
     text-align: center;
     font-size: 15px;
    //  height: 100%;
   }
   .sousuo{
     flex: 1;
   }
 }
}
.ppp{
    font-size: 12px;
    color: white;
   }
// .van-card{
//   width: 50%;
//   float: left;
// }
.back-top{
background: skyblue;
border: 1px solid orange;
}
</style>
